<template>
    <el-dialog :title="!dataForm.clientId ? '新增' : '修改'" destroy-on-close :before-close="closeDailog"
        :close-on-click-modal="false" :visible.sync="visible">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
            label-width="120px">
            <el-form-item label="资源" prop="clientId">
                <el-input v-model="dataForm.clientId" placeholder="编号" :disabled="dataForm.clientId != ''"></el-input>
            </el-form-item>
            <el-form-item label="资源" prop="resourceIds">
                <el-input v-model="dataForm.resourceIds" placeholder="资源"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="clientSecret">
                <el-input v-model="dataForm.clientSecret" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item label="域" prop="scope">
                <el-input v-model="dataForm.scope" placeholder="域"></el-input>
            </el-form-item>
            <el-form-item label="授权类型" prop="authorizedGrantTypes">
                <el-input v-model="dataForm.authorizedGrantTypes" placeholder="授权类型"></el-input>
            </el-form-item>
            <el-form-item label="重定向地址" prop="webServerRedirectUri">
                <el-input v-model="dataForm.webServerRedirectUri" placeholder="重定向地址"></el-input>
            </el-form-item>
            <el-form-item label="权限" prop="authorities">
                <el-input v-model="dataForm.authorities" placeholder="权限"></el-input>
            </el-form-item>
            <el-form-item label="令牌时效" prop="accessTokenValidity">
                <el-input v-model="dataForm.accessTokenValidity" placeholder="令牌时效"></el-input>
            </el-form-item>
            <el-form-item label="刷新时效" prop="refreshTokenValidity">
                <el-input v-model="dataForm.refreshTokenValidity" placeholder="刷新时效"></el-input>
            </el-form-item>
            <el-form-item label="扩展信息" prop="additionalInformation">
                <el-input v-model="dataForm.additionalInformation" placeholder="扩展信息"></el-input>
            </el-form-item>
            <el-form-item label="自动放行" prop="autoapprove">
                <el-input v-model="dataForm.autoapprove" placeholder="自动放行"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="closeDailog">取消</el-button>
            <el-button type="primary" :loading="submitLoading" @click="dataFormSubmit()">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import * as clientService from '@/api/upms/client'
    export default {
        data() {
            return {
                visible: false,
                submitLoading: false,
                dataForm: {
                    clientId: '',
                    resourceIds: 'oauth2-resource',
                    clientSecret: '',
                    scope: '',
                    authorizedGrantTypes: 'password,refresh_token,client_credentials',
                    webServerRedirectUri: '',
                    authorities: '',
                    accessTokenValidity: '',
                    refreshTokenValidity: '',
                    additionalInformation: '',
                    autoapprove: 'Y'
                },
                dataRule: {
                    resourceIds: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    clientSecret: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    scope: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    authorizedGrantTypes: [{
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    webServerRedirectUri: [{
                        required: false,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    authorities: [{
                        required: false,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    accessTokenValidity: [{
                        required: false,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    refreshTokenValidity: [{
                        required: false,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    additionalInformation: [{
                        required: false,
                        message: '不能为空',
                        trigger: 'blur'
                    }],
                    autoapprove: [{
                        required: false,
                        message: '不能为空',
                        trigger: 'blur'
                    }]
                }
            }
        },
        methods: {
            init(clientId) {
                this.dataForm.clientId = clientId || ''
                this.visible = true
                this.$nextTick(() => {
                    // console.log(this.$refs['dataForm'].resetFields())
                    this.$refs['dataForm'].resetFields()
                    if (this.dataForm.clientId) {
                        clientService.getclientinfo(this.dataForm.clientId).then(
                            data => {
                                this.dataForm.clientId = data.clientId
                                this.dataForm.resourceIds = data.resourceIds
                                this.dataForm.clientSecret = data.clientSecret
                                this.dataForm.scope = data.scope
                                this.dataForm.authorizedGrantTypes = data.authorizedGrantTypes
                                this.dataForm.webServerRedirectUri = data.webServerRedirectUri
                                this.dataForm.authorities = data.authorities
                                this.dataForm.accessTokenValidity = data.accessTokenValidity
                                this.dataForm.refreshTokenValidity = data.refreshTokenValidity
                                this.dataForm.additionalInformation = data.additionalInformation
                                this.dataForm.autoapprove = data.autoapprove
                            })
                    }
                })
            },
            // 表单提交
            dataFormSubmit() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        this.submitLoading = true
                        var params = {
                            'clientId': this.dataForm.clientId || '',
                            'resourceIds': this.dataForm.resourceIds,
                            'clientSecret': this.dataForm.clientSecret,
                            'scope': this.dataForm.scope,
                            'authorizedGrantTypes': this.dataForm.authorizedGrantTypes,
                            'webServerRedirectUri': this.dataForm.webServerRedirectUri,
                            'authorities': this.dataForm.authorities,
                            'accessTokenValidity': this.dataForm.accessTokenValidity,
                            'refreshTokenValidity': this.dataForm.refreshTokenValidity,
                            'additionalInformation': this.dataForm.additionalInformation,
                            'autoapprove': this.dataForm.autoapprove
                        }
                        var tick = this.dataForm.clientId ? clientService.updateclient(
                            params) : clientService.addclient(params)
                        tick.then(data => {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.submitLoading = false
                                    this.closeDailog()
                                    this.$emit('refreshDataList')
                                }
                            })
                        }).catch((res) => {
                            this.submitLoading = false
                            this.closeDailog()
                        })
                    }
                })
            },
            closeDailog() {
                this.$refs['dataForm'].resetFields()
                this.visible = false
            },
        }
    }
</script>